<template>
	<div>
		<el-form ref="form" :model="form" label-width="120px">
			<el-form-item label="患者就诊卡ID:" prop="idnumber" required="">
				<el-input v-model="form.idnumber" style="width:300px ;" placeholder="请输入诊断结果"></el-input>
				<el-button type="primary" style="margin-left: 50px;" @click="dialogFormVisible = true; getdiagnosis()">患者诊断信息</el-button>
			</el-form-item>
			<el-form-item label="患者姓名:" prop="name" required="">
				<el-input v-model="form.name" style="width:300px ;" placeholder="请输入患者姓名"></el-input>	
		  </el-form-item>
			<el-form-item label="诊断结果:" prop="result" required="">
				<el-input v-model="form.result" style="width:300px ;" placeholder="请输入诊断结果"></el-input>
			</el-form-item>
			<el-form-item label="药品名称:" required="">
				<el-input v-model="form.drug" style="width:300px ;" placeholder="请输入要添加的药品名称"></el-input>
				<el-button type="primary"  style="margin-left:50px;" icon="el-icon-search"
					@click="getmedicine">搜索药品
				</el-button>
			</el-form-item>	
			<el-form-item label="药品数量:" required="">
				<template >
				  <el-input-number v-model="form.amount" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
				</template>
			</el-form-item>
			<el-form-item label="药品规格:" required="">
				<el-input v-model="form.format" style="width:300px ;" placeholder="请输入药品规格"></el-input>
			</el-form-item>
			<el-form-item label="总价:" required="">
				<el-input v-model="form.money" style="width:300px ;" placeholder="请输入总价"></el-input>
			</el-form-item>
         <el-button type="primary" icon="el-icon-circle-plus-outline" @click = "submitForm('form')" style="margin-left:120px;">
			添加药品
		</el-button>
		<el-button type="primary" icon="el-icon-success"  @click="dialogTableVisible = true;getpatmedicine()" style="margin-left:50px;">
			打印处方
		</el-button>
		</el-form>
		<el-table :data="tableData" style="width: 100%" max-height="500" show-summary="getTotal">
			<el-table-column fixed prop="code" label="药品编码" >
			</el-table-column>
			<el-table-column prop="name" label="药品名称" >
			</el-table-column>
			<el-table-column prop="format" label="规格" >
			</el-table-column>
				<el-table-column prop="manufacturer" label="生产厂家" >
				</el-table-column>
			<el-table-column prop="money" label="单价" >
			</el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
						移除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<h1>&emsp;</h1>
		<el-dialog title="打印药品" :visible.sync="dialogTableVisible">
			<el-table :data="tableData1" style="width: 100%" show-summary="getTotal">
				<el-table-column prop="drug" label="所开药品" width="150">
				</el-table-column>
				<el-table-column prop="format" label="规格" width="150">
				</el-table-column>
				<el-table-column prop="amount" label="数量" width="150">
				</el-table-column>
				<el-table-column prop="money" label="价格">
				</el-table-column>
			</el-table>
			<h1>&emsp;</h1>
		 <el-button type="primary" @click="dialogTableVisible = false">确定</el-button>
		</el-dialog>
		<el-dialog title="患者诊断信息" :visible.sync="dialogFormVisible">
			<el-table :data="tableData2" style="width: 100%">
                <el-table-column prop="num" label="确诊单号" width="120">
				</el-table-column>
				<el-table-column prop="idnumber" label="患者就诊卡ID" width="120">
				</el-table-column>
				<el-table-column prop="name" label="患者姓名" width="120">
				</el-table-column>
				<el-table-column prop="age" label="年龄" width="120">
				</el-table-column>
				<el-table-column prop="sex" label="性别" width="120">
				</el-table-column>
				<el-table-column prop="day" label="就诊日期" width="150">
				</el-table-column>
				<el-table-column prop="result" label="诊断信息" >
				</el-table-column>
			</el-table>
			<h1>&emsp;</h1>
			<el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
		</el-dialog>
	</div>
</template>

<script>
	import {showMsgTitle} from '@/utils/api'
	import {showMsgConfirm} from '@/utils/api'
	import {getRequest}   from '@/utils/api'
	import {postRequest}   from '@/utils/api'
	import {uploadFileRequest}   from '@/utils/api'
	import {putRequest}   from '@/utils/api'
	import {deleteRequest}   from '@/utils/api'
	import {showConstants}   from '@/utils/api'
	export default {
		data() {
			return {
				form: {
					name: '',
					result: '',
					drug: '',
					amount: '',
					format:'',
					money: '',
				},
				form1: {
					name: '',
					message: ''
				},
				dialogTableVisible: false,
				dialogFormVisible: false,
				tableData: [],
				tableData1: [],
				tableData2: [],
				amount : 1
			}
		},
		methods: {
			handleChange(value) {
			        console.log(value);
			      },
			onSubmit() {
				console.log('submit!');
			},
			submitForm(formName) {
				postRequest('/addpdrug',this.form).then(resp => {
						  alert("开具药品处方成功！");
					 }).catch((err)=>
					 {
						  alert("开具药品处方失败，请重新开具！");
					 }
					 );
			},
			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},
			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},

			handleInputConfirm() {
				let inputValue = this.inputValue;
				if (inputValue) {
					this.dynamicTags.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			},
			handleChange(value) {
				console.log(value);
			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			getmedicine() {
				this.$axios.get('http://localhost:8081/querydrug?name='+this.form.drug).then((result) => {
					console.log(result.data);
					for(let i=0;i<result.data.length;i++){
						this.tableData.push(result.data[i]);
					}
					this.form.format =result.data[0].format;
				}).catch((err) => {
					console.log(error);
				});
			},
			getpatmedicine() {
				this.$axios.get('http://localhost:8081/querypdrug?name='+this.form.name).then((result) => {
					console.log(result.data);
					this.tableData1 = result.data
				}).catch((err) => {
					console.log(error);
				});
			},
	       
			getdiagnosis() {
				this.$axios.get('http://localhost:8081/idconfirm?idnumber='+this.form.idnumber).then((result) => {
					console.log(result.data);
					this.tableData2 = result.data
					this.form = result.data[0];
				}).catch((err) => {
					console.log(error);
				});
			},
			getTotal(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '合计';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (column.property === 'num') {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index];
					} else {
						sums[index] = '--';
					}
				});

				return sums;
			}

		},
		mounted() {
			this.getdiagnosis();
			this.getmessage();	
		}
	}
</script>

<style>
	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
</style>
